<template>
  <div class="supplier-info-wrap">
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" class="dividing">
        <el-col :span="12">
          <el-form-item label="用户ID：" prop="wxUserCode" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.wxUserCode" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态：" prop="status" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.status | flyUserStatus" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联供应商：" prop="supplier" style="margin-bottom: 0px;">
            <div v-if="baseInfo.supplier && baseInfo.supplier.length">
              <span v-for="(item,index) in baseInfo.supplier" :key="index">
                <span style="cursor:pointer;color:#406EFF;" @click="toSupplierDetail(item.supplierId)">{{ item.supplierName }}</span><span>{{ `${index !== (baseInfo.supplier.length - 1)?'，':''}` }}</span>
              </span>
            </div>
            <div v-else style="color:#999999">未关联</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：" prop="createTime" style="margin-bottom: 0px;">
            <ToolTip :content="format(baseInfo.createTime,'YYYY/MM/DD HH:mm:ss')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新人：" prop="updator" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.updator" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间：" prop="updateTime" style="margin-bottom: 0px;">
            <ToolTip :content="format(baseInfo.updateTime,'YYYY/MM/DD HH:mm:ss')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联账号情况：" prop="linkAccountNum" style="margin-bottom: 0px;">
            <div v-if="baseInfo.linkAccountNum">
              <el-tooltip placement="top" effect="dark">
                <div slot="content">已关联账号数量/用户填写账号数量</div>
                <span><span style="color:#FD8546">{{ handleStr(baseInfo.linkAccountNum)[0] }}</span>/{{ handleStr(baseInfo.linkAccountNum)[1] }}</span>
              </el-tooltip>
              <span class="link" @click="toAccount">查看关联账号</span>
            </div>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联状态：" prop="linkAccountStatus" style="margin-bottom: 0px;">
            {{ baseInfo.linkAccountStatus | linkAccountStatus }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { format } from '@/filters/date';
import { flyUserStatus, linkAccountStatus } from '@/filters/status';
import { hasRouteAuth } from '@/utils/permission';
import ElMessage from '@/utils/message';

export default {
  components: {
  },
  filters: {
    flyUserStatus,
    linkAccountStatus
  },
  props: {
    baseInfo: {// 详情信息
      type: Object,
      default: () => {}
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      format
    };
  },
  methods: {
    hasRouteAuth,
    handleStr(str = '') {
      if (!str) { return; }
      return str.split('/');
    },
    toAccount() {
      if (!this.baseInfo.supplier || !this.baseInfo.supplier.length) {
        this.$message.error('当前用户未关联供应商，无法查询');
        return;
      }
      if (!this.hasRouteAuth('medium:resource:admin')) {
        ElMessage.warning('暂无资源可读权限，请联系管理员开通');
        return;
      }
      const operator = this.baseInfo.supplier.map(el => el.supplierName).join(',');
      const routeUrl = this.$router.resolve({
        name: 'resource',
        query: {
          operator
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    handleRegion(region = '') {
      return region.replace(/,/g, '-');
    },
    // 跳转销售供应商
    toSupplierDetail(channelId) {
      if (channelId) {
        const url = this.$router.resolve({
          name: 'supplierManageDetail',
          params: { id: channelId }
        });
        window.open(url.href, '_blank');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  .supplier-info-wrap{
    .supplier-form {
      & ::v-deep {
        .el-form-item {
            .el-form-item__label {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #999999 !important;
              opacity: 1;
              line-height: 30px;
            }
          }
          .el-form-item__content {
            font-size: 14px;
            font-family: PingFang SC;
            line-height: 30px;
            font-weight: 400;
            color: #333333;
            opacity: 1;
          }
      }
    }
    .link{
      color: #406EFF;
      cursor: pointer;
    }
    .dividing{
      &::v-deep {
        .el-col {
          .el-form-item__content {
            border-right: 1px solid #EBEEFD;
          }
          &:nth-child(2n) {
            .el-form-item__content {
              border-right: none;
            }
          }
          &:last-child {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
      }
    }
  }
  .mobile-el-form {
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: none !important;
        }
      }
    }
  }
</style>
